// * 根路由组件
<template>
  <div class="index-box">
    <!-- 页面header -->
    <header class="header-box">
      <the-header></the-header>
    </header>
    <!-- 页面主体 -->
    <section class="content-box">
      <!-- <banner /> -->
      <router-view></router-view>
    </section>
    <!-- 页面footer -->
    <footer class="footer-box">
      <the-footer></the-footer>
    </footer>
  </div>
</template>

<script>
import TheHeader from '_components/base/TheHeader'
import TheFooter from '_components/base/TheFooter'

export default {
  name: 'Main',

  components: {
    TheHeader,
    TheFooter,
  },

  props: {},

  data() {
    return {}
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {},
}
</script>

<style lang="less">
.index-box {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .header-box {
    width: 100%;
    border-bottom: 1px solid rgba(151, 151, 151, 0.5);

    position: fixed;
    top: 0;
    z-index: 2;
  }

  .content-box {
    width: 100%;
    flex: 1;
    flex-basis: auto;
    margin-top: 81px;
    background-color: rgba(243, 246, 251, 1);
  }

  .footer-box {
    min-height: 170px;
  }
}
</style>
